<template>
    <div class="main-container" id="main-container">
        <div style="background-color: #fff; height:100%" id="BasicInformation">
            <a-tabs   :lazy-load="true" type="card" @change="tabsChange" justify>
                <a-tab-pane title="报修单管理" key="1">
                    <div style="height: 100%;">
                        <EquipmentMaintenanceList></EquipmentMaintenanceList>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="报修单派工" key="2">
                    <div style="height: 100%;">
                        <EquipmentMaintenanceList2></EquipmentMaintenanceList2>
                    </div>
                </a-tab-pane>
                <a-tab-pane title="报修单完工录入" key="3">
                    <div style="height: 100%;">
                        <EquipmentMaintenanceList3></EquipmentMaintenanceList3>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </div>

    </div>
</template>

<script lang="ts">
    import {defineComponent, reactive, ref, onMounted} from 'vue'
    import emitter from '@/hooks/useEventBus'
    import EquipmentMaintenanceList from '@/components/DyeingFactory/TPMMachineMaintenance/EquipmentMaintenance/EquipmentMaintenanceList.vue'
    import EquipmentMaintenanceList2 from '@/components/DyeingFactory/TPMMachineMaintenance/EquipmentMaintenance/EquipmentMaintenanceList2.vue'
    import EquipmentMaintenanceList3 from '@/components/DyeingFactory/TPMMachineMaintenance/EquipmentMaintenance/EquipmentMaintenanceList3.vue'


    export default defineComponent({
        name: 'EquipmentMaintenance',
        components:{EquipmentMaintenanceList,EquipmentMaintenanceList2,EquipmentMaintenanceList3},
        setup() {

            const pageData = reactive({
                tableIndex: "1"
            })

            const tabsChange = (e: string | number) => {
                emitter.emit('window-change')
                if (e === '1') {
                    emitter.emit('EquipmentMaintenanceList')
                }
            }
            return {
                pageData,
                tabsChange
            }
        }
    })
</script>
<style scoped>
    .main-container {
        height: 100%;
    }
</style>